var vueSelect = {
	props: ['value','placeholder','url','sorts'],
	data : function(){
		return {
			sort_sel: '',
			rows: [],
			show: false
		}
	},
	template: `<div class="selector">
					<input type="text" class="form-control" style="width:100%"
						:placeholder="placeholder"
						:value="value"
						@input="$emit('input', $event.target.value)"
						@click.stop="show=!show">
					<div class="selector-panel" v-show="show">
						<ul class="selector-title">
				            <li v-for="(sort,index) in sorts" 
				            	@click="sort_sel=sort;getList(sort)"
				            	:class="[sort_sel == sort ? 'active' : '']">{{ sort }}
				            </li>
				        </ul>
				        <dl class="selector-list">
				        	<dd v-for="row in rows" @click="chooseHandle(row.val)">{{ row.val }}</dd>
				        </dl>
			        </div>
			        <!--遮罩层，实现点击其他地方收起-->
        			<div class="overlay" v-show="show" @click="show=false"></div>
				</div>`,
	created: function(){
		this.getList();
	},
	methods: {
		getList: function(sort){
			var data = {};
			data['sort_sel'] = this.sort_sel;
			var _this = this;
			$.post(this.url, data, function(rsp){
				_this.rows = rsp.data.rows;
			},'json')
		},
		chooseHandle: function(val) {
			this.show = false;
			this.$emit('input', val);
		},
	}
}
